<template>
  <n-form label-width="auto" label-placement="left" size="small">
    <n-form-item label="账号" show-require-mark>
      <n-input v-model:value="form.username" disabled />
    </n-form-item>
    <n-form-item label="昵称" show-require-mark>
      <n-input v-model:value="form.nickname" />
    </n-form-item>
    <n-form-item label="出生日期">
      <n-date-picker
        style="width: 100%"
        type="date"
        v-model:formatted-value="form.birthday"
        clearable
      />
    </n-form-item>
    <n-form-item label="电话">
      <n-input v-model:value="form.phone" />
    </n-form-item>
    <n-form-item label="邮箱">
      <n-input v-model:value="form.email" />
    </n-form-item>
    <n-form-item label="性别">
      <n-radio-group v-model:value="form.gender">
        <n-radio
          :label="item.label"
          :value="item.value"
          :key="item.value"
          v-for="item in codeStore.getCodesByDict(_Dict.Gender)"
        />
      </n-radio-group>
    </n-form-item>
    <n-form-item label="地址">
      <n-input v-model:value="form.address" />
    </n-form-item>
    <n-form-item label="备注">
      <n-input type="textarea" v-model:value="form.remark" />
    </n-form-item>
    <n-form-item label=" ">
      <n-button size="medium" type="info" @click="handleConfirmOnClick">保存</n-button>
    </n-form-item>
  </n-form>
</template>
<script lang="ts" setup>
import { postOrPutUser } from '@/api/base/User'

const userStore = useUserStore()
const codeStore = useCodeStore()

let form = reactive({} as BaseUserPO)

onMounted(() => {
  Object.assign(form, userStore.userInfo)
})

async function handleConfirmOnClick() {
  const { code } = await postOrPutUser(form)
  if (_ApiCode.Success == code) userStore.InitUserInfo()
}
</script>
